<template>
  <div class="shopDetail" v-if='shopMess'>
    <download @close-down='closeDowns' v-if='download&&!showAllComment'></download>
  	<div class="shopHead">
      <div class="headLeft" @click='goBack'></div>
      <div class="headMain">
        <a href="javascript:;" :class="{active:activeLink==1}" @click.stop='goLink("shop")'>商品</a>
        <a href="javascript:;" :class="{active:activeLink==2}" @click.stop='goLink("detail")'>详情</a>
        <a href="javascript:;" :class="{active:activeLink==3}" @click.stop='goAllComment'>评价</a>
      </div>
      <div class="headRight" @click='share'>
        <img src="../../assets/image/carProduct/share.png" />
      </div>
    </div>
    <div class="ordinaryShop" v-if='shopMess.IS_GROUPON!=1&&shopMess.IS_BARGAIN!=1'>
      <div class="allMain" v-if='!showAllComment' :class='{allMainActive:download}'>
        <div class="shopMess" id="shop" name='shop'>
          <swiper :show-dots="false" v-model='currentIndex'>
            <swiper-item class="black" v-for='(item,index) in shopMess.PHOTO_LIST'  v-if='shopMess.PHOTO_LIST.length>0' :key='index'>
              <div class="swiperItem">
                 <img :src="shopMess.IMG_URL+item.IMG" alt="" />
              </div>
            </swiper-item>
          </swiper>
          <p class="index" v-if='shopMess.PHOTO_LIST'>{{(currentIndex+1)+"/"+shopMess.PHOTO_LIST.length}}</p>
          <seckillShop v-if='shopMess.IS_SECKILLING>0||shopMess.SECKILL_STARTDATE>0' :seckillShopMess='seckill'></seckillShop>
          <!-- 商品信息 -->
          <div class="shopName">
            <h1>{{shopMess.SERV_SUBJECT}}</h1>
            <p>{{shopMess.REMARK}}</p>
            <div class="price" v-if='shopMess.IS_SECKILLING==0'>
              <span><label>￥</label>{{shopMess.PRICE}}</span>
              <s><label>￥</label>{{shopMess.ORIGINAL_PRICE}}</s>
            </div>
          </div>
          <div class="specifications" @click='selectRule'>
            <p v-if='watchSelect.str==""'>请选择{{selectType}}</p>
            <p v-if='watchSelect.str!=""'>已选择：{{watchSelect.str}}</p><span></span>
          </div>
          <!-- 砍价商品成就榜 -->
           <div class="cutList" v-show="showAchievementBol" @click='checkAllUser'>
                <div class="listHeader">
                    <h1>成就榜</h1>
                    <div class="headerR">
                        <span></span>
                        <label></label>
                    </div>
                </div>
                <achievementList :userList='userList' type='1' v-if='userList.length>0'></achievementList>
                <div class="noGroupUser" v-if='userList.length==0'>
                  <img src="../../assets/image/cutPrice/noAchievement.png" alt="" />
                  <p>暂无成就，等你上榜~</p>
                </div>
            </div>
        </div>
        <!-- 评论 -->
        <div class="comments">
          <h1>全部评论({{shopMess.COMMENTS}})</h1>
          <div class="commentsItem" v-for='(item,index) in commentMess'>
             <div class="comHead">
              <img class="headImg" :src="item.HEADPHOTO" alt="">
              <div class="userName">{{item.USER_NAME | fiterPhone}}</div>
              <div class="star">
                <span v-for='i in Math.ceil(item.SCORE)'></span>
              </div>
              <span class="good" v-if="!item.IS_USER_LIKE" @click="goodAction(item.SERVICE_COMMENT_ID,index,item.LIKE_COUNT)">
                 有用<i style="font-style:normal;margin-left:0.05rem">{{item.LIKE_COUNT}}</i>
              </span>
              <span class="good1" v-if="item.IS_USER_LIKE">
                  <img src="../../assets/image/question/good.png" alt="">{{item.LIKE_COUNT}}
              </span>
            </div>
            <div class="comMain">
              <div class="conTitle">
                {{item.CONTENT}}
              </div>
              <div class="comImg">
                <img :src="item.PHOTO1" alt="" @click='showImg' v-if='item.PHOTO1'>
                <img :src="item.PHOTO2" alt="" @click='showImg' v-if='item.PHOTO2'>
                <img :src="item.PHOTO3" alt="" @click='showImg' v-if='item.PHOTO3'>
                <img :src="item.PHOTO4" alt="" @click='showImg' v-if='item.PHOTO4'>
              </div>
              <div class="replayCom" v-if='item.REPLY_CONTENT'>
                <span></span>
                {{item.REPLY_CONTENT}}
              </div>
            </div>
            <div class="comFooter">
              <p>{{item.CREATE_TIME | filterTimes}}</p>
            </div>
          </div>
          <div v-if='commentMess.length==0' class="noComment">
            <img src="../../assets/image/carProduct/noComment.png" alt="" />
            <p>暂无评论</p>
            <p>购买后快来发表评论吧</p>
          </div>
          <div class="allComments" @click='goAllComment' v-if='commentMess.length==4'>
            查看更多评论
          </div>
        </div>
    <!-- 我的提问 -->
      <div class="question" >
        <p class="title">问买家 <span class="count" v-if="hasQuestion" @click="goAllQuestion">{{questionCount}}个问答<span></span></span></p>

        <ul v-if="hasQuestion" >
          <li  v-for="item in questionList" @click="goQuestionDetail(item.QUESTION_ID)">
            <p class="questionContent"><img src="../../assets/image/question/question.png" alt=""><span>{{item.MEESAGE}}</span></p>
            <p class="answerCount">{{item.COUNT}}个回答</p>
          </li>
        </ul>

        <div  v-if="hasQuestion">
          <div class="showAllQuestion" @click="goAllQuestion">查看全部问答</div>
        </div>
        <div class="noQuestion" v-if="!hasQuestion" @click="goQuestion">
          <p class="questionContent"><img src="../../assets/image/question/question.png" alt="">商品好不好,问问买过的人就知道了呗 ></p>
        </div>
      </div>

        <!-- 商品详情 -->
        <div class="detailMess" id="detail" name='detail'>
          <p>向上拖动，查看更多图文详情</p>
          <img src="../../assets/image/carProduct/up.png" alt="" class="up" />
          <div class="detailHtml" v-html='shopMess.SERV_DESC'></div>
        </div>

      </div>
      <div class="footer" v-if='!showAllComment'>
        <!-- :href="'tel:'+shopMess.SERV_PHONE"  @click="toServerChat"-->
        <a :href="'tel:'+shopMess.SERV_PHONE" >
          <img src="../../assets/image/carProduct/tel.png" alt="" />
        </a>
        <div class="shopCart" @click='goShopCart'>
          <img src="../../assets/image/carProduct/shopCart.png" alt="" />
          <span :class='{circle1:shopNum<10,circle2:shopNum<100&&shopNum>=10,circle3:shopNum<1000&&shopNum>=100}' v-if='shopNum>0'>{{shopNum}}</span>
        </div>
        <div class="addShop" @click='addShop'>加入购物车</div>
        <div class="toPay" @click='toPay'>立即支付</div>
      </div>
      <popup v-model="showPop">
        <div class="popRule">
          <div class="popHead">
            <div class="popHLeft" v-if='shopMess.PHOTO_LIST.length>0'>
              <img :src="shopMess.IMG_URL+shopMess.PHOTO_LIST[0].IMG" alt=""/>
            </div>
            <div class="popHCenter">
              <h1>￥{{Number(shopMess.PRICE)+Number(watchSelect.sum)}}</h1>
              <p v-if='watchSelect.str!=""'>已选择：{{watchSelect.str}}</p>
              <p v-if='watchSelect.str==""'>请选择商品的属性</p>
            </div>
            <div class="popHRight">
              <img src="../../assets/image/carProduct/close.png" @click='closePop'/>
            </div>
          </div>
          <div class="popMain">
            <div class="rule" v-for='(items,index) in shopMess.ATTR_LIST' :key="index">
              <p>{{items.TYPE}}</p>
              <div class="ruleDetail">
                <span v-for='(itemss,indexs) in items.ATTRIBURE' :class='{activeSpan:itemss.IS_SELECT==1}' @click='selectClass(index,indexs)' :key="indexs">{{itemss.SERV_NAME}}</span>
              </div>
            </div>
            <div class="number">
              <group>
                <x-number title="数量" :step="1" :min='1' v-model='number'></x-number>
              </group>
            </div>
          </div>
          <div class="popFooter" @click='determine'>
            {{popText}}
          </div>
        </div>
      </popup>
      <toast v-model="showToast" type='text'>{{toastText}}</toast>
    </div>
    <div class="groupShop" v-if='shopMess.IS_GROUPON==1'>
      <groupShop :shopMess='shopMess' :download='download' :showAllComment='showAllComment' :commentMess='commentMess.slice(0,3)' @show-allcomment='showAllComments' :selectType='selectType' :shopClass='shopClass'></groupShop>
    </div>
    <div class="cutShop" v-if='shopMess.IS_BARGAIN==1&&shopMess.IS_SECKILLING!=1'>
      <cutShop :shopMess='shopMess' :download='download' :showAllComment='showAllComment' :commentMess='commentMess.slice(0,3)' @show-allcomment='showAllComments' :selectType='selectType' :shopClass='shopClass'></cutShop>
    </div>
    <allComment v-if='showAllComment' :shopId='shopId' :categoty='categoty'></allComment>
    <div class="share" v-if='showShare'>
      <img src="../../assets/image/sharelog.png" alt="" />
      <div class="shareBtn" @click='iKonw'>知道了</div>
    </div>
    <div class="mask" v-if='showShare'>

    </div>
    <!-- 所有成绩榜 -->
    <popup v-model="showAllUser" position='right' width='100%'>
      <div class="allCutUser" v-if='showAllUser'>
        <x-header title="成就榜" :left-options="{backText:'',preventGoBack:true}" class='whiteHeader' @click.native='closeAllUser'>
        </x-header>
        <div class="allUserList">
            <scroller :on-infinite="infinites" ref='myScroller3'>
              <achievementList :userList='userList' type='2'></achievementList>
              <div class="noMoreDate"  v-if='noData'>
                <div class="noMoreLine"></div>
                <span>没有更多了哟</span>
              </div>
            </scroller>
            <div class="noAchievement" v-if='userList.length==0'>
                <img src="../../assets/image/cutPrice/noAchievement.png" alt="" />
                <p>暂无成就，等你上榜~</p>
            </div>
        </div>
      </div>
    </popup>
    <confirm v-model="confirmVisible" title="提示" @on-confirm="goLogin">
      <p style="text-align:center;">您当前尚未登录，现在前往登录？</p>
    </confirm>
  </div>
</template>
<script>
/*智能保养*/
import {XHeader,Swiper,SwiperItem,Popup, Group, XNumber,Toast,Confirm} from 'vux';
import { setCookie, getCookie,appid,reloads,pushStateUrl,GetQueryString,iosAdroidWx} from '../../util/commonUtils';
import wx from 'weixin-js-sdk'//微信jssdk
import allComment from '../../components/all-comment.vue'; //评论组件
import seckillShop from '../../components/seckillShop.vue'; //秒杀
import download from '../../components/downloads';
import groupShop from '../../components/groupShop';  //团购组件
import cutShop from '../cutPrice/cutpGoodsDetail';  //砍价组件
import achievementList from '../cutPrice/achievementList';  //成就组件
export default {
  name:"shopDetail",
  // 数据
  data(){
    return{
    	userId:'',
      shopId:'',//商品id
      shopMess:'', //商品信息
      currentIndex:0, //轮播图当前的索引
      selectType:'',  //选择的规格
      activeLink:1, //顶部切换
      commentMess:'',  //评论数据
      showAllComment:false,  //是否显示所有评论
      showPop:false, //弹窗控制
      number:1,  //商品的数量
      showToast:false, //显示toast提示框
      toastText:'',  //toast提示框
      seckill:{
        IS_SECKILLING:-1,//是否是秒杀商品
        SECKILL_DETAIL_ID:'',//秒杀id
        SALE_NUM:'', //卖出去的数量
        TOTAL_NUM:'',//秒杀总数
        LIMIT_NUM:'',
        START_DATE:'',//开始时间
        END_DATE:'',//结束时间
        PRICE:'',//秒杀价
        OPRICE:''//原价
      },
      addBuy:false,  //代表是添加购物车（false）还剩直接购买（true）
      carFlag:false,  //判断用户是否有车辆信息
      cosmet:false, //是否是美容产品
      showShare:false, //显示分享
      shopNum:0,  //购物车数量
      popText:'加入购物车',
      categoty:'',
      download:true,
      shopClass:1, //商品分类
      showAchievementBol: false,// 是否显示成就榜
      userList: '', // 成就列表
      shopServId: '', // 商品路由的id
      showAllUser:false, //是否显示全部团购用户
      page: 1,
      noData:false,
      hasQuestion:true, //是否有问答
      questionList:'', //问答列表
      questionCount:0,
      isLike:false,
      confirmVisible:false,
    }
  },
  // 计算属性
  computed:{
    //监控所有选中的商品，并计算价格，拼凑选择的属性
    watchSelect(){
      let arr=this.shopMess.ATTR_LIST;
      let str='';
      let sum=0;
      let obj={};//加入购物车的数据
      if(this.shopMess.ATTR_LIST){
        obj.PARAMS=[];
        let objs={};
        objs.SHOP_NAME=this.shopMess.SHOP_NAME;
        objs.SERV_ID=this.shopMess.SERV_ID;
        objs.QUANTITY=this.number;
        objs.COMP_ID=this.shopMess.COMP_ID;
        objs.ATTR_LIST=[];
        for(let i=0;i<this.shopMess.ATTR_LIST.length;i++){
          for(let j=0;j<this.shopMess.ATTR_LIST[i].ATTRIBURE.length;j++){
            let objss={};
            if(this.shopMess.ATTR_LIST[i].ATTRIBURE[j].IS_SELECT==1){
              objss.ATTRIBURE=this.shopMess.ATTR_LIST[i].ATTRIBURE[j].SERV_ID;
              objss.TYPE=this.shopMess.ATTR_LIST[i].TYPE;
              objs.ATTR_LIST.push(objss);
              str+='['+this.shopMess.ATTR_LIST[i].TYPE+']';
              str+=this.shopMess.ATTR_LIST[i].ATTRIBURE[j].SERV_NAME+' ';
              sum+=Number(this.shopMess.ATTR_LIST[i].ATTRIBURE[j].PRICE);
            }
          }
        }
        objs.price=Number(this.shopMess.PRICE)+sum;
        obj.PARAMS.push(objs);
      }
      return {
        str:str,
        sum:sum,
        addObj:obj
      }
    },
    //判断是否选择了所有的规格和属性
    allSelect(){
      let arr=this.shopMess.ATTR_LIST;
      let flag=false;
      if(this.shopMess.ATTR_LIST){
        if(this.shopMess.ATTR_LIST.length==0){
          return true;
        }
        for(let i=0;i<this.shopMess.ATTR_LIST.length;i++){
          for(let j=0;j<this.shopMess.ATTR_LIST[i].ATTRIBURE.length;j++){
            if(this.shopMess.ATTR_LIST[i].ATTRIBURE[j].IS_SELECT==1){
              flag=true;
            }
          }
          if(!flag){
            break;
          }
        }
        if(!flag){
          return false;
        }else{
          return true;
        }
      }
    }
  },
  // 创建（实例创建完成）
  created(){
    this.userId=getCookie('loginkey');
    this.shopId=this.$route.params.id;//商品id
    this.shopClass=this.$route.query.groupId;
    if(!this.shopClass){
      this.shopClass=1;
    }
    if(sessionStorage.getItem('reload')){
      sessionStorage.removeItem('reload');
    }else{
      sessionStorage.setItem('reload',1);
      reloads();
      return;
    }
    if(!sessionStorage.getItem('closeDown')){
      this.download=true;
    }else{
      this.download=false;
    }
    this.getShopMess();
    this.getComment();
     this.getQuestion(); //问答
    this.$nextTick(()=>{
      this.scrollMonitor();
    });
    if(this.userId){
      this.getShopCarNum();
    }
    this.shopServId = this.$route.params.id;
    if(this.$route.query.showbol){
      this.showAchievementBol = true;
      // 请求成就数据
      this.getUser()
    }
  },
  // el被创建，并挂载到实例上
  mounted(){

  },
  beforeRouteLeave (to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
    this.$vux.loading.hide();
    next();
  },
  beforeDestroy(){
    window.onscroll=function(){};
  },
  // 方法（实例中的方法）-----------
  methods:{
    goLogin() {
      this.$router.push('/login');
    },
      goodAction(id,index,count){
        if(!this.userId) {
          this.confirmVisible = true;
          return;
        }
      let obj={};
      obj.SERV_ID = this.shopId;
      obj.USER_ID = this.userId;
      obj.SERV_COMMENT_ID = id;
      this.$set(this.commentMess[index],'IS_USER_LIKE',1)
       this.$set(this.commentMess[index],'LIKE_COUNT',count+1)
      this.$fetchPost('ServCommentWeb/userOrderCommentLike',obj).then(res=>{
          console.log(res)
      },err=>{
        console.log(err)
      })
    },
    //我的问答
     goQuestion(){
      console.log(this.shopMess.SERV_SUBJECT)
      sessionStorage.setItem('aname',this.shopMess.SERV_SUBJECT);
      sessionStorage.setItem('aimg',this.shopMess.SHARE_IMG);
        this.$router.push('/doQuestion/'+this.shopId)
    },
    goQuestionDetail(id){
      this.$router.push('/questionDetail/'+id)
    },
    goAllQuestion(){
      this.$router.push('/allQuestion/'+this.shopId)
    },
    //获取问答数据
    getQuestion(){

      let obj ={};
      obj.SERV_ID =this.shopId;
      obj.PAGE_NO =1;
      obj.PAGE_SIZE =3;
      this.$fetchPost('serviceDetailQA/ getServiceDetailQuestionList',obj).then(res=>{
       // console.log(res)
        this.questionCount=res.QUESTION_COUNT
        if(res.QUESTION_COUNT==0){
          this.hasQuestion=false;
        }else{
          this.hasQuestion=true
        }
        this.questionList=res.QUESTION_LIST
      },err=>{
          console.log(err)
      })
    },
    closeDowns(val){
      this.download=false;
      sessionStorage.setItem('closeDown',1);
    },
    goBack(){
      if(GetQueryString('from')){
        this.$router.push('/homepage');
      }else{
        this.$router.go(-1);
        this.$router.go(-1);
      }
    },
    share(){
      this.showShare=true;
    },
    iKonw(){
      this.showShare=false;
    },
    //获取购物车数量
    getShopCarNum(){
      this.$fetchPost('/ShoppingCartWeb/getShopCartCount.action',{USER_ID:this.userId}).then(res=>{
          if(res.STATUS_CODE==1){
            this.shopNum=res.SHOPPING_CART
          }
      },err=>{})
    },
    //获取商品的信息
    getShopMess(){
      this.$vux.loading.show({
       text: ''
      });
      let obj={};
      obj.SERV_ID=this.shopId;
      obj.GROUPON_ID=this.shopClass;
      if(getCookie('loginkey')){
        obj.USER_ID=getCookie('loginkey');
      }
      this.$fetchPost('/ServDetailWeb/getServDetail.action',obj).then(res=>{
          if(res.STATUS_CODE==1){
            this.$vux.loading.hide();
            this.shopMess=res;
            if(this.shopMess.IS_GROUPON==1||this.shopMess.IS_BARGAIN==1){
              this.selectType='';
            }else{
              this.selectType='数量';
            }
            if(this.shopMess.IS_SECKILLING==1){//秒杀的所有参数
              this.seckill.IS_SECKILLING=res.IS_SECKILLING;
              this.seckill.SECKILL_DETAIL_ID=res.SECKILL_DETAIL_ID;
              this.seckill.SALE_NUM=res.SALE_NUM;
              this.seckill.TOTAL_NUM=res.TOTAL_NUM;
              this.seckill.LIMIT_NUM=res.LIMIT_NUM;
              this.seckill.START_DATE=res.START_DATE;
              this.seckill.END_DATE=res.END_DATE;
              this.seckill.PRICE=res.PRICE;
              this.seckill.OPRICE=res.ORIGINAL_PRICE;
            }else if(this.shopMess.SECKILL_STARTDATE!=''){
              this.seckill.IS_SECKILLING=res.IS_SECKILLING;
              this.seckill.START_DATE=res.SECKILL_STARTDATE;
              this.seckill.PRICE=res.PRICE;
              this.seckill.OPRICE=res.ORIGINAL_PRICE;
            }
            for(let i=0;i<this.shopMess.ATTR_LIST.length;i++){
              for(let j=0;j<this.shopMess.ATTR_LIST[i].ATTRIBURE.length;j++){
                this.$set(this.shopMess.ATTR_LIST[i].ATTRIBURE[j],'IS_SELECT',0);
              }
              this.selectType+=this.shopMess.ATTR_LIST[i].TYPE;
            }
            if(res.SERV_FIRST_CLASS==10002){
              this.cosmet=true;
              this.getUserCar();
            }
            sessionStorage.removeItem('reload');
            this.getConfig(res.SERV_SUBJECT,res.SHARE_IMG);
          }
        },err=>{
          console.log(err);
        })
    },
    //去购物车
    goShopCart(){
      let that=this;
      if(!this.userId){//判断是否登录
        this.$vux.confirm.show({
          title:'提示',
          content:'请先登录',
          onConfirm () {
            that.$router.push('/login');
          }
        })
      }else{
        this.$router.push('/shoppingCart');
      }
    },
    //获取评论数
    getComment(){
      this.$fetchPost('/ServComment/getServDetailComment.action',{USER_ID:this.userId,SERV_ID:this.shopId,PAGE_NO:1,PAGE_SIZE:4}).then(res=>{
          if(res.STATUS_CODE==1){
            this.commentMess=res.RESULT_DATA;
          }
        },err=>{
          console.log(err);
        })
    },
    // index 是ATTR_LIST索引  indexs 是ATTRIBURE的索引
    selectClass(index,indexs){
        for(let j=0;j<this.shopMess.ATTR_LIST[index].ATTRIBURE.length;j++){
          this.$set(this.shopMess.ATTR_LIST[index].ATTRIBURE[j],'IS_SELECT',0);
        }
        this.$set(this.shopMess.ATTR_LIST[index].ATTRIBURE[indexs],'IS_SELECT',1);
    },
    //检查购买和添加购物车是否选择属性
    checkAdd(){
      let that=this;
      if(!this.userId){//判断是否登录
        this.$vux.confirm.show({
          title:'提示',
          content:'请先登录',
          onConfirm () {
            that.$router.push('/login');
          }
        })
        return false;
      }
      if(this.shopMess.ATTR_LIST.length==0){//直接加入购物车
        return true;
      }
      if(this.allSelect){//判断是否选择了所有的属性和规格
        this.showPop=false;
        return true;
      }else{
        if(this.showPop){
          this.toastText='请选择商品属性';
          this.showToast=true;
        }else{
          this.showPop=true;
        }
        return false;
      }
    },
    //美容下单前需要判断用户是否有车辆
    checkedOrder(){
      if(this.userId){
        return true;
      }else{
        this.$vux.confirm.show({
          title:'提示',
          content:'请先登录',
          onConfirm () {
            that.$router.push('/login');
          }
        })
        return false;
      }
      if(this.carFlag){
        this.$vux.confirm.show({
          title:'提示',
          content:'请先添加车辆',
          onConfirm () {
            localStorage.setItem("addCar",JSON.stringify({}));
            localStorage.setItem('carFrom',location.href.split('#')[1]);//添加车辆跳转回来的地址
            // 标识将跳回选择车辆
            localStorage.removeItem('selectCars');
            localStorage.removeItem('editCar');
            this.$router.push('/addCar');
          }
        })
        return false;
      }else{
        return true;
      }
    },
    getUserCar(){
      //获取用户所有车辆
      this.$fetchGet('/UserWeb/getCars.action',{USER_ID:this.userId}).then(res=>{
        if(res.STATUS_CODE==1){
           if(res.CARS.length==0){
              this.carFlag=true;
           }else{
              this.carFlag=false;
           }
        }
      },err=>{
        console.log(err);
      })
    },
    //加入购物车
    addShop(){
      this.addBuy=false;
      this.popText='加入购物车';
      let flag;
      if(this.cosmet){
        flag=this.checkedOrder();
      }else{
        flag=this.checkAdd();
      }
      if(!flag){
        return;
      }
      let obj=this.watchSelect.addObj;//选择的属性
      obj.USER_ID=this.userId;
      this.$fetchPost('/ShoppingCartWeb/addToShopCart.action',{jsonParams:JSON.stringify(obj)}).then(res=>{
          if(res.STATUS_CODE==1){
            this.showToast=true;
            this.shopNum=res.SHOPPING_CART;
            this.toastText='加入购物车成功';
          }
        },err=>{
          console.log(err);
        })
    },
    determine(){
      if(this.addBuy){
        this.toPay();
      }else{
        this.addShop();
      }
    },
    //支付
    toPay(){
      this.addBuy=true;
      this.popText='立即支付';
      let flag;
      if(this.cosmet){
        flag=this.checkedOrder();
      }else{
        flag=this.checkAdd();
      }
      if(!flag){
        return;
      }
      //封装支付数据
      let settleMess={};
      settleMess.USER_ID=this.userId;
      settleMess.ORDER_LIST=[];
      let objs={};
      objs.COMP_ID=this.watchSelect.addObj.PARAMS[0].COMP_ID;
      objs.SHOP_NAME=this.watchSelect.addObj.PARAMS[0].SHOP_NAME;
      objs.SERV_PARAMS=[];
      let objss={};
      objss.SERV_ID=this.watchSelect.addObj.PARAMS[0].SERV_ID;
      objss.QUANTITY=this.watchSelect.addObj.PARAMS[0].QUANTITY;
      objss.SERV_FIRST_CLASS=this.shopMess.SERV_FIRST_CLASS;
      objss.SERV_SECON_CLASS=this.shopMess.SERV_SECON_CLASS;
      objss.SUPP_CASH_VOL=this.shopMess.SUPP_CASH_VOL;
      objss.SUPP_DIS_VOL=this.shopMess.SUPP_DIS_VOL;
      objss.SUPP_NOR_CASH_VOL=this.shopMess.SUPP_NOR_CASH_VOL;
      objss.SERV_SUBJECT=this.shopMess.SERV_SUBJECT;//商品名称
      objss.PRICE=Number(this.shopMess.PRICE)+Number(this.watchSelect.sum);//商品价格
      objss.MARK=1;//0代表保养，1代表普通商品
      objss.ATTR_LIST=[];
      for(let i=0;i<this.watchSelect.addObj.PARAMS[0].ATTR_LIST.length;i++){
        let objAtr={};
        objAtr.ATTRIBURE=String(this.watchSelect.addObj.PARAMS[0].ATTR_LIST[i].ATTRIBURE);
        objAtr.TYPE=this.watchSelect.addObj.PARAMS[0].ATTR_LIST[i].TYPE;
        objss.ATTR_LIST.push(objAtr);
      }
      objs.SERV_PARAMS.push(objss);
      settleMess.ORDER_LIST.push(objs);
      sessionStorage.removeItem('orderMess');
      sessionStorage.removeItem('distribuVoucher');
      localStorage.removeItem('from');
      sessionStorage.setItem('shopMess',JSON.stringify(settleMess));//商品支付的数据
      //this.$router.push('/shopPay');
      location.href=window.getIps+'/CARNT/jsp/pay/indexM.html#/shopPay';
    },
    //选择规格
    selectRule(){
      this.showPop=true;
    },
    //点击图片全屏显示
    showImg (e) {
        var commentImgBg = document.createElement('div');
        commentImgBg.style.cssText = 'position: fixed;\
                                      top: 0;\
                                      left: 0;\
                                      right: 0;\
                                      bottom: 0;\
                                      z-index:999;\
                                      background-color: #000;';
        var commentImg = document.createElement('img');
        commentImg.style.cssText = 'width: 100%;\
                                    position: fixed;\
                                    left: 50%;\
                                    top: 50%;\
                                    -webkit-transform: translate(-50%,-50%);\
                                    transform: translate(-50%,-50%);'
        commentImg.src = e.target.src;
        commentImgBg.appendChild(commentImg);

        commentImgBg.onclick = function () {
          document.body.removeChild(commentImgBg)
        }
        document.body.appendChild(commentImgBg)
    },
    //顶部tab切换
    goLink(name){
      this.showAllComment=false;
      this.$nextTick(function(){
        if(name=='shop'){
          this.activeLink=1;
          document.documentElement.scrollTop = document.body.scrollTop =0;
        }else{
          this.activeLink=2;
          document.getElementById("detail").scrollIntoView();
        }
      });

    },
    //关闭弹框
    closePop(){
      this.showPop=false;
    },
    //查看全部评论和顶部的评论
    goAllComment(){
      this.showAllComment=true;
      this.activeLink=3;
    },
    //团购的查看全部评论
    showAllComments(val){
      this.showAllComment=val;
      this.activeLink=3;
    },
    //监控滚动条
    scrollMonitor(){
      let that=this;
      window.onscroll=function(){
        if(that.showAllComment){
          return;
        }
        let top1=document.getElementById("detail").offsetTop;
        let top2=document.body.scrollTop||document.documentElement.scrollTop;
        if(top2>top1-20){
          that.activeLink=2;
        }else{
          that.activeLink=1;
        }
      }
    },
    //获取微信的配置信息
    getConfig(title,imgUrl){
      let timestamp,nonceStr,signature;
      let desc='我在车网通发现了一款不错的商品，赶快来看看吧。';
      if(this.shopMess.GROUPON_TYPE==1){
        title=`一起开团，享受超值${this.shopMess.GROUPON_PRICE}元拼${this.shopMess.SERV_SUBJECT}`;
        desc='全民火拼，拼团专享优惠，超值一拼到底';
      }else if(this.shopMess.GROUPON_TYPE==2){//一分拼团
        title=`${this.shopMess.GROUPON_PRICE}元【一分抽奖】${this.shopMess.SERV_SUBJECT}`;
        desc='是真的！｛商品名称｝只要｛商品价格｝！快来参加！';
      }
      let urls=iosAdroidWx().urls;
      let appid=iosAdroidWx().appid;
      this.$fetchPost(urls,{'url' : window.location.href},{emulateJSON:true})
      .then(res=>{
        var data = res;
        // timestamp = data.timestamp;
        // nonceStr =  data.nonceStr;
        // signature = data.signature;
        timestamp=data.NOW_TIME;
        nonceStr=data.NONCESTR;
        signature=data.SKEY;
        // console.log(timestamp,nonceStr,signature,appId)
        wx.config({
            debug : false, // 开启调试模式,false调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId :appid, // 必填，公众号的唯一标识
            timestamp : timestamp, // 必填，生成签名的时间戳
            nonceStr : nonceStr, // 必填，生成签名的随机串
            signature : signature,// 必填，签名，见附录1
            jsApiList : [ 'onMenuShareTimeline', 'onMenuShareAppMessage','chooseWXPay', 'showOptionMenu' ]
        });
        let that=this;
        let linkUrl=location.href;
        wx.ready(function(){
          // 分享给朋友
          wx.onMenuShareAppMessage({
            title: title,
            desc: desc,
            link: linkUrl,
            imgUrl: imgUrl,
            trigger: function (res) {
            },
            success: function (res) {
            },
            cancel: function (res) {
            },
            fail: function (res) {
              alert(JSON.stringify(res));
            }
          });

          //分享朋友圈
          wx.onMenuShareTimeline({
            title: title,
            desc: desc,
            link: linkUrl,
            imgUrl: imgUrl,
            trigger: function (res) {
            },
            success: function (res) {
            },
            cancel: function (res) {
            },
            fail: function (res) {
              alert(JSON.stringify(res));
            }
          });
        })
      },err=>{

      });
    },
    //关闭所有拼团用户
    closeAllUser(){
      this.showAllUser=false;
    },
    // 查看所有拼团用户
    checkAllUser(){
      this.showAllUser=true;
    },
    getUser(){
      this.$fetchPost('/Bargain/getTopBargainGoodsList.action',{
          PAGE_NO:this.page,
          PAGE_SIZE:3,
          SERVDETAIL_ID:this.shopServId
        }).then(res=>{
          if(res.STATUS_CODE==1){
            this.userList=res.TOP_ORDER_LIST
          }
        },err=>{
          console.log(err);
        })
    },
    // 获取成就数据
     getUserList(){
        this.$fetchPost('/Bargain/getTopBargainGoodsList.action',{
          PAGE_NO:this.page,
          PAGE_SIZE:10,
          SERVDETAIL_ID:this.shopServId
        }).then(res=>{
          if(res.STATUS_CODE==1){
            this.userList=res.TOP_ORDER_LIST;
            if(res.TOP_ORDER_LIST.length<10){
              this.$refs.myScroller3.finishInfinite(2);
              if(this.userList.length>0){
                  this.noData=true;
              }
            }else{
              this.page++;
              this.$refs.myScroller3.finishInfinite();
            }
          }
        },err=>{
          console.log(err);
        })
      },
    // 上拉加载更多成就
    getMordeUserList(){
      this.$fetchPost('/Bargain/getTopBargainGoodsList.action',{
        PAGE_NO:this.page,
        PAGE_SIZE:10,
        SERVDETAIL_ID:this.shopServId
      }).then(res=>{
          if(res.STATUS_CODE==1){
            this.userList=this.userList.concat(res.TOP_ORDER_LIST);
            if(res.TOP_ORDER_LIST.length<10){
              this.$refs.myScroller3.finishInfinite(2);
            }else{
              this.page++;
              this.$refs.myScroller3.finishInfinite();
            }
          }
        },err=>{
          console.log(err);
        })
    },
    // 加载成就数据
    infinites(){
      if(this.page==1){
        this.getUserList();
      }else{
        this.getMordeUserList();
      }
    },
    // 客服帮助
    toServerChat(){
      this.$router.push('/customerService')
    }
  },
  // 子组件
  components:{
    Swiper,SwiperItem,allComment,Popup, Group, XNumber,Toast,seckillShop,download,groupShop,cutShop,achievementList,XHeader,Confirm
  }
}
</script>
<!--当前页面的样式 -->
<style lang="less" scoped>
@import url('../../assets/css/public.less');
.shopDetail{
  width: 7.5rem;
  padding-bottom: 1rem;
  background: #fff;
  min-height: 100%;
  .mask{
    position: fixed;
    top: 0;
    bottom: 0;
    left:0;
    right: 0;
    background: rgba(0,0,0,.8);
    z-index: 9999;
  }
  .share{
    width: 7.5rem;
    height: 5.18rem;
    position: absolute;
    top: 7%;
    right: 0%;
    z-index: 10000;
    img{
      width: 4.48rem;
      height: 4.88rem;
      margin-left: 1.5rem;
    }
    .shareBtn{
      width: 4rem;
      height: 0.8rem;
      font-size: 0.3rem;
      line-height: 0.8rem;
      color: #fff;
      background: #ff0000;
      border-radius: 0.3rem;
      margin: 0.5rem auto;
    }
  }
  .popRule{
    background: #fff;
    .popHead{
      display: flex;
      align-items:flex-start;
      padding: 0.2rem;
      position: relative;
      .borderBFu(#ede9e9);
      .popHLeft{
        img{
          width: 2rem;
          display: block;
          height: 1.6rem;
        }
      }
      .popHCenter{
        width: 60%;
        text-align: left;
        padding-left: 0.2rem;
        h1{
          font-size: 0.35rem;
          height: 0.8rem;
          line-height: 0.8rem;
          color: #ec2121;
        }
        p{
          margin-top: 0.2rem;
          font-size: 0.25rem;
        }
      }
      .popHRight{
        position: absolute;
        top:-0.3rem;
        right: 0.2rem;
        img{
          width: 0.54rem;
          height: 0.54rem;
        }
      }
    }
    .popMain{
      .rule{
        .borderBFu(#ede9e9);
        padding:0 0 0.2rem 0;
        p{
          font-size: 0.25rem;
          text-align: left;
          padding: 0.1rem 0.2rem;
          color: #666666;
        }
        .ruleDetail{
          display: flex;
          padding: 0 0.2rem;
          flex-wrap:wrap;
          span{
            font-size: 0.22rem;
            padding: 0.1rem 0.15rem;
            margin:0.07rem 0.1rem;
            background: #f5f5f5;
            border-radius:0.15rem;
            color:#272727;
          }
          .activeSpan{
            background: #ec2121;
            color:#fff;
          }
        }
      }
      .number{
        padding: 0.2rem 0;
      }
    }
    .popFooter{
      height: 0.8rem;
      line-height: 0.8rem;
      font-size: 0.3rem;
      color: #fff;
      background: #ec2121;
    }
  }
  .shopHead{
    position:fixed!important;
    z-index: 499;
    width: 7.5rem;
    height: 0.9rem;
    background: #fff;
    .borderBFu(#b1b1b1);
    padding: 0.1rem 0;
    display: flex;
    justify-content: space-between;
    .headLeft{
      margin: 0.19rem 0.3rem;
      width: 0.3rem;
      height: 0.3rem;
      border:2px solid #999;
      border-width: 0px 0 1px 1px;
      transform:rotate(45deg);
    }
    .headMain{
      display: flex;
      align-items:center;
      a{
        font-size: 0.32rem;
        color: #333;
        display: inline-block;
        height: 0.91rem;
        line-height: 0.91rem;
        box-sizing: border-box;
        margin: 0 0.25rem;
        position: relative;
        z-index: 499;
      }
      .active{
        color: #ec2121;
        border-bottom:0.05rem solid #ec2121;
      }
    }
    .headRight{
      display: flex;
      align-items:center;
      padding-right: 0.3rem;
      img{
        width: 0.38rem;
        height: 0.38rem;
      }
    }
  }
  .allMain{
    padding-top: 0.9rem;
    background: #fff;
    .cutList{
       border-bottom: 0.18rem solid #efeff4;
      .noGroupUser{
        padding: 0.3rem 0;
        img{
          width: 0.86rem;
          height: 0.86rem;
          display: block;
          margin: 0 auto;
        }
        p{
          font-size: 0.26rem;
          color: #999;
          padding: 0.3rem 0 0;
        }
      }
    }
    .listHeader{
        display: flex;
        justify-content:space-between;
        padding: 0 0.3rem 0 0.2rem;
        height: 0.8rem;
        align-items:center;
        h1{
           height: 0.8rem;
           font-size: 0.26rem;
           line-height: 0.8rem;
           text-align: left;
           color: #222;
        }
        .borderBFu(#ddd);
        .headerR{
            display: flex;
            align-items:center;
            span{
                font-size: 0.24rem;
                color: #999;
                padding-right: 0.15rem;
            }
            label{
                width: 0.2rem;
                height: 0.2rem;
                transform:rotate(45deg);
                border: 0.02rem solid #414141;
                border-width:0.02rem 0.02rem 0 0;
            }
        }
    }
    .swiperItem{
      height:7.5rem;
      width: 7.5rem;
      img{
        width: 100%;
      }
    }
    .index{
      width: 0.76rem;
      height: 0.36rem;
      border-radius: 0.23rem;
      font-size: 0.28rem;
      color: #fff;
      background: rgba(0,0,0,.4);
      margin: -0.7rem auto 0;
      padding-top: 0.03rem;
      box-sizing: border-box;
      position: relative;
      z-index: 466;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .shopName{
      position: relative;
      margin-top: 0.15rem;
      padding-bottom: 0.3rem;
      background: #fff;
      h1{
        font-size: 0.32rem;
        color: #232326;
        padding: 0.22rem 0 0.18rem 0;
      }
      p{
        font-size: 0.26rem;
        color: #ec2121;
        padding: 0 0.2rem;
      }
      .price{
        display: flex;
        padding: 0.28rem 0;
        justify-content:center;
        align-items:center;
        span{
          font-size: 0.32rem;
          font-weight: bold;
          padding-right: 0.2rem;
          color:#ec2121;
          label{
            font-size: 0.26rem;
          }
        }
        s{
          font-size: 0.24rem;
          color:#999;
          label{
            font-size: 0.22rem;
          }
        }
      }
    }
    .specifications{
      display: flex;
      justify-content:space-between;
      padding: 0 0.3rem 0 0.2rem;
      align-items:center;
      height: 1rem;
      border-bottom: 0.15rem solid #f0f0f3;
      .borderTFu(#ede9e9);
      p{
        font-size: 0.26rem;
        color: #222;
      }
      span{
        width: 0.2rem;
        height: 0.2rem;
        transform:rotate(45deg);
        border: 0.02rem solid #414141;
        border-width:0.02rem 0.02rem 0 0;

      }
    }
    .detailMess{
      p{
        font-size: 0.3rem;
        color: #646464;
        padding: 0.3rem 0 0.15rem 0;
      }
      .up{
        width: 0.6rem;
        display: block;
        margin: 0 auto 0.2rem;
        height: 0.6rem;

      }
    }
    .comments{
      border-bottom:0.15rem solid #f0f0f3;
      background: #fff;
      h1{
        height: 0.8rem;
        font-size: 0.26rem;
        line-height: 0.8rem;
        color: #222;
        text-align: left;
        padding-left: 0.2rem;
        .borderBFu(#e3e3e3);
      }
      .commentsItem{
        padding:0 0.2rem;
        .borderBFu(#e3e3e3);
      .comHead{
            position: relative;
          .headImg{
            height:0.6rem;
            width:0.6rem;
            border-radius:50%;
            position: absolute;
            top: 0.3rem;
            left: 0;
          }
          .star{
            padding-left: .76rem;
            display: flex;
            span{
              width: 0.2rem;
              height: 0.2rem;
              margin: 0.15rem 0.05rem;
              background: url(../../assets/image/carProduct/star.png) no-repeat;
              background-size: 0.2rem 0.2rem;
            }
          }
          .userName{
            font-size: 0.2rem;
            text-align: left;
            padding-top: 0.3rem;
            padding-left: .76rem;

          }
          .good{
            position: absolute;
            top: .4rem;
            right: 0;
            font-size:0.23rem;
            line-height: 0.42rem;
            height: 0.44rem;
             width: 1.1rem;
            color:#666666;
            border:1px solid #aaaaaa;
            border-radius: .22rem;
          }
          .good1{
            img{
              width: 0.28rem;
              height: 0.28rem;
              margin-top: -3px;
             margin-right: 0.05rem;
             vertical-align: middle;
            }
            position: absolute;
            top: .4rem;
            right: 0;
            font-size:0.23rem;
            line-height: 0.42rem;
            height: 0.44rem;
            width: 1.1rem;
            color:#f22e2e;
            border:1px solid #f22e2e;
            border-radius: .22rem;

          }
        }
        .comMain{
          padding:0.1rem 0;
          .conTitle{
            text-align: left;
            font-size: 0.3rem;
            color: #1a1a1b;
          }
          .comImg{
            font-size: 0;
            text-align: left;
            img{
              width: 1.75rem;
              height: 1.75rem;
              border-radius: 0.2rem;
              padding: 2% .1rem;
              box-sizing: border-box;
            }
          }
          .replayCom{
            width: 96%;
            padding: 0.1rem;
            border-radius: 0.1rem;
            margin: 0.1rem auto;
            color: #999;
            background: #dddddd;
            font-size: 0.3rem;
            text-align: left;
            position: relative;
            span{
              border:0.2rem solid #ddd;
              border-width: 0.2rem 0.2rem 0 0;
              transform:rotate(45deg);
              position: absolute;
              top: -0.1rem;
              left: 0.4rem;
              background: #ddd;
            }
          }
        }
        .comFooter{
          padding: 0.1rem 0 0.2rem 0;
          p{
            font-size: 0.25rem;
            text-align: left;
          }
        }
      }
    }
    .allComments{
      width: 2.8rem;
      height: 0.6rem;
      line-height: 0.6rem;
      text-align: center;
      font-size: 0.25rem;
      border:1px solid #ababab;
      border-radius: 0.6rem;
      margin: 0.2rem auto;
    }
    .noComment{
      padding: 0.2rem 0;
      background: #efeff4;
      img{
        width: 1.03rem;
        height: 1.33rem;
        display: block;
        margin: 0 auto 0.3rem;
      }
      p{
        font-size: 0.25rem;
        color: #999;
        padding: 0.05rem 0;
      }
    }
  }
  .question{
    border-bottom:0.2rem solid #f5f5f5;
    .title{
      font-family: PingFangSC-Regular;
      font-size:0.27rem;
      color: #333333;
      text-align:left;
      padding:0.3rem 0.2rem 0.3rem 0.32rem;
      .count{
        float: right;
        color: #888888;
        font-size:0.25rem;
         span{
          width: 0.2rem;
          height: 0.2rem;
          vertical-align: middle;
         display: inline-block;
         margin-top: -0.03rem;
          color: #888888;
          transform:rotate(45deg);
          border: 0.02rem solid #888888;
          border-width:0.02rem 0.02rem 0 0;

        }
      }
    }
    ul{
      li{
        text-align:left;
        padding-left:0.37rem;
        padding-bottom:0.3rem;
        .questionContent{
          font-size:0.23rem;
          color:#666666;
          margin-bottom:0.09rem;
          padding-right:0.3rem;
          img{
            width: 0.33rem;
            float: left;
            vertical-align: middle;
            margin-right:0.07rem;
            margin-right: 0.1rem;
          }
          span{
            display: block;
          }
        }
        .answerCount{
           font-size: 0.2rem;
           padding-left: 0.43rem;
            color: #999999;
        }
      }
    }
    .noQuestion{

      font-size:0.26rem;
      color:#888888;
      padding-bottom:0.52rem;
      img{
        width: 0.33rem;
        vertical-align: middle;
        margin-right: 0.09rem;
      }
    }
    .showAllQuestion{
      height: 0.6rem;
      width: 2.8rem;
      border-radius:0.3rem;
      font-size:0.25rem;
      line-height: 0.6rem;
      color:#666666;
      border:1px solid #999999;
      margin: 0 auto 0.3rem;
    }
  }
  .allMainActive{
    padding-top: 1.74rem;
  }
  .footer{
    height: 1rem;
    display: flex;
    align-items:center;
    position: fixed!important;
    bottom: 0;
    width: 7.5rem;
    color: #fff;
    font-weight: 400;
    .borderTFu(#f8f8f8);
    background: #fff;
    z-index: 500;
    .toPay{
      height: 1rem;
      line-height: 1rem;
      width:2.5rem;
      font-size: 0.3rem;
      background: url(../../assets/image/carProduct/down.png) no-repeat;
      background-size: 2.5rem 1rem;
    }
    img{
      width: 0.44rem;
      height: 0.44rem;
      display:block;
      margin: 0.28rem auto;
    }
    .addShop{
      height: 1rem;
      line-height: 1rem;
      width: 2.5rem;
      font-size: 0.3rem;
      background: url(../../assets/image/carProduct/shopcar.png) no-repeat;
      background-size: 2.5rem 1rem;
    }
    a{
      width: 17%;
      height: 1rem;
    }
    .shopCart{
      height: 1rem;
      .borderLFu(#f8f8f8);
      width: 17%;
      position: relative;
      span{
        font-size: 0.2rem;
        position: absolute;
        border-radius: 50%;
        top:0.1rem;
        right: 0.2rem;
        z-index: 99;
        color: #fff;
        display: flex;
        background: #ec2121;
        justify-content: center;
        align-items:center;
      }
    }
  }
  .allCutUser{
  height: 100%;
  overflow: scroll;
  background: #fff;
  min-height: 100%;
  .allUserList{
    padding: 0 0.2rem;
    background: #fff;
    }
  }
  .noMoreDate{
    position: relative;
    height: 0.6rem;
    margin-bottom:-1rem;
    z-index: 999;
    padding-top: 0.5rem;
    .noMoreLine{
      width: 2.9rem;
      margin: 0 auto;
      height: 1px;
      background: #ccc;
      transform:scaleY(0.5);
    }
    span{
      font-size: 0.22rem;
      color: #666;
      padding: 0 0.15rem;
      position: absolute;
      background: #fff;
      transform:translate(-50%,-55%);
      }
    }
  }
  .noAchievement{
    position: absolute;
    top:50%;
    left: 50%;
    transform:translate(-50%,-50%);
    img{
        display: block;
        width: 1.77rem;
        height: 1.83rem;
        margin: 0 auto;
    }
    p{
        color: #888;
        font-size: 0.3rem;
        margin-top: 0.2rem;
    }
}
</style>
